<template>
	<view class="index">
		<Header :isShow='isShow' :title="title" />
		<view class="container">
			<scroll-view scroll-y="true" >
				<view class="search-bar">
					<text class="iconfont icon-fangdajing"></text>
					<input type="text" placeholder="搜索歌曲" @tap="toSreach">
				</view>
				
				
				<!-- 骨架屏 -->
				<view class="index-list" v-if="isLoading">
					<view class="index-list-item" 
					v-for="item in topList" 
					:key="item.id"
					:itemId='item.id'
					>
						<view class="list-item" >
							<view class="index-list-img" style="background-color: #f7f7f7;">
							</view>
							<view class="index-list-text">
								<view class="list-text" style="background-color: #f7f7f7;margin-top: 10rpx; border-radius: 20rpx;"></view>
								<view class="list-text" style="background-color: #f7f7f7;margin-top: 10rpx; border-radius: 20rpx;"></view>
								<view class="list-text" style="background-color: #f7f7f7;margin-top: 10rpx; border-radius: 20rpx;"></view>
							</view>
						</view>
					</view>
				</view>
				
				
				<!-- 实际列表 -->
				<view class="index-list" v-if="!isLoading">
					<view class="index-list-item" 
					v-for="item in topList" 
					:key="item.id"
					:itemId='item.id'
					@tap="handleToList(item.id)"
					>
						<view class="list-item">
							<view class="index-list-img" >
								<image :src="item.coverImgUrl" mode=""></image>
								<text>每日更新</text>
							</view>
							<view class="index-list-text" >
								<view class="list-text" v-for="(item01, index) in item.tracks">{{index + 1}}.{{item01.first}}-{{item01.second}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {ref, onMounted, reactive} from 'vue'
	import Header from '@/components/header/index.vue'
	import {getTopList} from "@/common/api.js"
	export default{
		name: 'IndexMian',
		components:{ Header },
		setup() {
			// 状态
			let isShow = ref(false)
			let title = ref('网易云音乐')
			let topList = reactive([])
			let isLoading = ref(true)
			
			// 方法
			// 点击后进入不同的list界面
			let handleToList = id => {
				uni.navigateTo({
					url:'../list/index?id=' + id
				})
			}
			
			// 跳转到搜索歌曲页面
			let toSreach = () => {
				uni.navigateTo({
					url:'../search/search',
				})
			}
			
			// 生命周期
			onMounted(async()=>{
				const res = await getTopList()
				topList.push(...res)
				isLoading.value = false
			})
			return{
				isShow,
				title,
				topList,
				isLoading,
				handleToList,
				toSreach
			}
		}
	}
</script>

<style>
	.search-bar{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 70rpx 30rpx 30rpx 30rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;
	}
	.search-bar input{
		font-size: 28rpx;
		flex: 1;
	}
	.search-bar text{
		margin-left: 28rpx;
		font-size: 26rpx;
		margin-right: 26rpx;
	}
	.index-list{
		margin: 0 30rpx;
	}
	.index-list-item{
		display: flex;
		margin-bottom: 34rpx;
	}
	.list-item{
		display: flex;
	}
	.index-list-img{
		height: 212rpx;
		width: 212rpx;
		position: relative;
		border-radius: 30rpx;
		overflow: hidden;
		margin-right: 22rpx;
	}
	.index-list-img image{
		width: 100%;
		height: 100%;
	}
	.index-list-img text{
		position: absolute;
		left: 12rpx;
		bottom: 16rpx;
		color: white;
		font-size: 20rpx;
	}
	.index-list-text{
		width: 234px;
		display: flex;
		flex-direction: column;
	}
	.list-text{
		width: 90%;
		height: 33%;
		overflow: hidden;
		line-height: 32px;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
